<script lang="ts" setup>
const emit = defineEmits(['change', "update:modelValue"]);
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  size: {
    type: [Number, String],
    default: '16px'
  }
});

const checked = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit('update:modelValue', val);
  }
})

const style = computed(() => {
  let size: any = typeof props.size == 'number' ? props.size + 'px' : props.size;
  if (size == parseInt(size)) size += 'px';
  return {
    width: size,
    height: size
  }
})

function change() {
  checked.value = !checked.value;
  emit('change', checked.value);
}
</script>

<template>
  <span class="vc-checkbox">
    <img class="image" :style="style" v-show="!checked" src="@/assets/circle-check.png" alt="" title="" @click.stop="change" />
    <img class="image" :style="style" v-show="checked" src="@/assets/circle-check-success.png" alt="" title="" @click.stop="change"/>
  </span>
</template>

<style lang="scss">
.vc-checkbox {
  .image {
    width: 16px;
    height: 16px;
    display: inline-block;
  }
}
</style>
